<!DOCTYPE HTML>
<html style="background-color:rgb(249,249,251)">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>ActivitiesDetails</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/pair.css" />
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.css" />

</head>

<style media="screen">
    .comment {
        position: fixed;
        width: 100%;
        height: 2rem;
        bottom: 0;
        background-color: #F4F5F6;
        margin: 0 auto;
    }

    .innercomment {
        position: relative;
        width: 95%;
        margin-top: 0.125rem;
        height: 1.75rem;
        margin-left: 0.5rem;
        border-radius: 1rem;
        background-color: #F4F5F6
    }

    .innerimg {
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        left: 0.25rem;
        top: 0.125rem;
    }

    .innertext {
        position: absolute;
        width: 5rem;
        height: 1.5rem;
        left: 2rem;
        top: 0.125rem;
        line-height: 1.5rem;
    }

    .inner_icon {
        float: left;
        width: 45%;
        height: 1.75rem;
        margin-top: 0.125rem;
    }

    .commentarea {
        width: 100%;
        background-color: rgb(249, 249, 251);
        text-align: center;
    }

    .small_commentarea {
        width: 100%;
        height: 1.5rem;
        background-color: rgb(249, 249, 251);
        text-align: center;
    }

    .huismall_commentarea {
        width: 100%;
        height: 1.5rem;
        background-color: rgb(249, 249, 251);
        text-align: center;
        color: #ccc
    }

    .button {
        background-color: red;
        border-radius: 0.5rem;
    }

    .comments {
        overflow: auto;
        word-break: break-all;
        width: 82%;
        float: left;
        height: auto !important;
    }

    .omments1 {
        overflow: auto;
        word-break: break-all;
        width: 100%;
        height: auto !important;
    }
</style>

<body style="background-color:rgb(249,249,251)">
    <div style="width:100%;height:1rem;text-align:center">
        <div style="font-size:0.65rem">
            {{activities.user}}-{{activities.dept}}-{{activities.time}}
        </div>
    </div>

    <div v-if="activities.videoPath != ''" style="width:90%;height:30%;margin:0 auto;margin-top:0.3rem;" @click="openvideo()">
        <img src="../../image/videoBC.png" alt="" style="width:100%;height:100%;">
    </div>

    <div style="font-family: 'Microsoft Yahei', Arial ;margin-top:0.3rem;font-size:0.75rem;width:90%;display:block;word-break: break-all;word-wrap: break-word;margin: 1rem auto;">
        {{{activities.info}}}
    </div>

    <div style="width:90%;margin:1rem auto;">
        <!-- height:6rem; -->
        <img v-for="item in activities.imagearray" :src="item" alt="" style="margin-top:1rem;" @click="openimg($event,$index)">
    </div>

    <div class="commentarea" style="margin-top:2rem">
        <div v-if="content.length>0" class="small_commentarea">评论区</div>
        <div v-else="content.length==0" class="huismall_commentarea">暂无评论哦...</div>
    </div>
    <div class="aui-card-list" style="background-color:rgb(249,249,251);margin-bottom:2rem" v-for="item in content">
        <div class="aui-card-list-header aui-card-list-user aui-border-b">
            <div class="aui-card-list-user-avatar" style="margin-top:-0.5rem">
                <img src="../../image/head2.jpg" class="aui-img-round">
            </div>
            <div class="aui-card-list-user-name">
                <div>{{item.contentuser}}</div>
                <small>{{item.contenttime}}</small>
            </div>
            <div class="aui-card-list-user-info"></div>
        </div>
        <div class="aui-card-list-content-padded" style="height: 60px;">
            <div v-if="user==item.contentuser" class="comments">{{item.contenttext}}</div>
            <span v-if="user==item.contentuser" @click="deletecontent($index)" style="color:#FF4500; width:18%;border-radius:0.5rem;height:1.25rem;margin-left:0.75rem;text-align:center; vertical-align:middle;display: table-cell;line-height:0.75rem;">
                删除评论
            </span>
            <div v-else="user!=item.contentuser" class="comments1">{{item.contenttext}}</div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue1.0.js"></script>
<script type="text/javascript" src="../../script/util.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    photoBrowser = null;
    apiready = function () {
        photoBrowser = api.require("photoBrowser");
        var user = api.getPrefs({
            key: 'user',
            sync: true
        });
        var USER = JSON.parse(user);
        videoPlayer = api.require('videoPlayer');
        vm = new Vue({
            el: "body",
            data: {
                activities: null,
                content: [],
                user: ""
            },
            created: function () {
                var me = this;
                me.get();
                me.getcontent();

            },
            methods: {
                get: function () {
                    var me = this;
                    var index = api.pageParam["index"];
                    var type = api.pageParam["type"];
                    if (type == 1) {
                        var value = api.getPrefs({
                            key: 'activities',
                            sync: true
                        });
                        var result = JSON.parse(value);
                        me.activities = result[index];
                        console.log(result)
                        me.user = me.activities.currentuser;
                    } else if (type == 2) {
                        var value = api.getPrefs({
                            key: 'activities1',
                            sync: true
                        });
                        var json = JSON.parse(value);
                        me.activities = json[index];

                        me.user = me.activities.currentuser;

                    }
                    //点赞
                    else if (type == 3) {
                        var parselist = api.getPrefs({
                            key: 'activities3',
                            sync: true
                        });
                        var result3 = JSON.parse(parselist);
                        me.activities = result3[index];
                        me.user = me.activities.currentuser;
                    }
                    else if (type == 4) {
                        var storagelist = api.getPrefs({
                            key: 'activities4',
                            sync: true
                        });
                        var result4 = JSON.parse(storagelist);
                        me.activities = result4[index];
                        me.user = me.activities.currentuser;
                    }
                    else {
                        var commentlist = api.getPrefs({
                            key: 'activities5',
                            sync: true
                        });
                        var result5 = JSON.parse(commentlist);
                        me.activities = result5[index];
                        me.user = me.activities.currentuser;
                    }
                },
                getcontent: function () {
                    var me = this;
                    api.ajax({
                        url: serverIp + '/friend/getcontentActivity.do',
                        method: 'post',
                        data: {
                            values: {
                                activity_id: me.activities.oid
                            }
                        }
                    }, function (ret, err) {
                        if (ret) {
                            me.content = ret;
                        }
                    });

                },
                openvideo: function () {
                    var me = this;
                    videoPlayer.play({
                        texts: {
                            head: {
                                title: ''
                            }
                        },
                        styles: {
                            head: {
                                bg: 'rgba(0.5,0.5,0.5,0.7)',
                                height: 44,
                                titleSize: 20,
                                titleColor: '#fff',
                                backSize: 44,
                                backImg: 'fs://img/back.png',
                                setSize: 44,
                                setImg: 'fs://img/set.png'
                            },
                            foot: {
                                bg: 'rgba(0.5,0.5,0.5,0.7)',
                                height: 44,
                                playSize: 44,
                                playImg: 'fs://img/back.png',
                                pauseImg: 'fs://img/back.png',
                                nextSize: 44,
                                nextImg: 'fs://img/back.png',
                                timeSize: 14,
                                timeColor: '#fff',
                                sliderImg: 'fs://img/slder.png',
                                progressColor: '#696969',
                                progressSelected: '#76EE00'
                            }
                        },
                        path: me.activities.videoPath, //（可选项）字符串类型；文档的路径，支持网络和本地（fs://）路径；默认：未传值时不播放
                        //在 android 平台上不支持 widget://
                        autoPlay: true //（可选项）布尔类型；打开时是否自动播放；默认：true（自动播放）
                    });
                },
                //删除评论
                deletecontent: function (index) {
                    var me = this;
                    api.ajax({
                        url: serverIp + '/friend/deletecontentActivity.do',
                        method: 'post',
                        data: {
                            values: {
                                contentoid: me.content[index].contentoid
                            }
                        }
                    }, function (ret, err) {
                        if (ret) {
                            alert("删除成功!");
                            me.getcontent();
                        }
                    });
                },
                //评论框
                writecomment: function () {
                    var me = this;
                    var dialogBox = api.require('dialogBox');
                    dialogBox.input({
                        keyboardType: 'default',
                        texts: {
                            title: '评论内容',
                            placeholder: '请输入您的评论',
                            leftBtnTitle: '取消',
                            rightBtnTitle: '提交评论'
                        },
                        styles: {
                            bg: '#F4F5F6',
                            corner: 6,
                            w: 300,
                            h: 210,
                            title: {
                                h: 40,
                                alignment: 'center',
                                size: 14,
                                color: '#000',
                                marginT: 20,
                            },
                            input: {
                                h: 60,
                                y: 30,
                                marginT: 15,
                                marginLeft: 10,
                                marginRight: 10,
                                textSize: 14,
                                textColor: '#000',
                                alignment: 'left'
                            },
                            dividingLine: {
                                width: 0.5,
                                color: '#696969'
                            },
                            left: {
                                bg: 'rgba(0,0,0,0)',
                                color: '#007FFF',
                                size: 12
                            },
                            right: {
                                bg: 'rgba(0,0,0,0)',
                                color: '#007FFF',
                                size: 12
                            }
                        }
                    }, function (ret) {
                        if (ret.eventType == 'left') {
                            var dialogBox = api.require('dialogBox');
                            dialogBox.close({
                                dialogName: 'input'
                            });
                        } else if (ret.eventType == 'right') {
                            //上传评论
                            // alert(ret.text);
                            api.ajax({
                                url: serverIp + "/friend/changecommentActivity.do",
                                method: 'post',
                                data: {
                                    values: {
                                        activityoid: me.activities.oid,
                                        userId: USER.userId,
                                        content: ret.text
                                    } 

                                }
                            }, function (ret, err) {
                                if (ret) {
                                    alert("提交成功!");
                                    me.getcontent();
                                }
                            });

                            var dialogBox = api.require('dialogBox');
                            dialogBox.close({
                                dialogName: 'input'
                            });
                        }
                    });
                },
                openimg: function (ev, index) {
                    var me = this;
                    me.activities.imagearray.pop()
                    api.execScript({
                        script: 'changeOpentype();'
                    });
                    photoBrowser.open({
                        images: me.activities.imagearray,
                        placeholderImg: 'widget://res/img/apicloud.png',
                        bgColor: '#000',
                        activeIndex: index
                    });
                }
            }
        });
    }
    function closephotoBrowser(){
        photoBrowser.close();
    }
</script>